<template>
  <div style="height: 100%">
    <div
      class="head"
      style="display: flex; justify-content: flex-end; align-items: center"
    >
      <div class="company">华小为产销存系统</div>

      <span style="margin-right: 20px; color: #ffffff">{{ username }}</span>

      <span style="margin-right: 20px">
        <el-button type="text" @click="logout" style="color: #ffffff">
          退出登录
        </el-button>
      </span>


    </div>
    <div class="body">
      <div class="nav">
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :default-active="defaultActiveIndex"
        >
          <el-sub-menu index="1">
            <template #title>
              <span>生产管理</span>
            </template>
            <el-menu-item index="1-1" class="sub-item" @click="handleClick(15)"
              >合金牌号管理</el-menu-item
            >
            <el-menu-item index="1-2" class="sub-item" @click="handleClick(16)"
              >熔炼生产管理</el-menu-item
            >
            <el-menu-item index="1-3" class="sub-item" @click="handleClick(17)"
              >生产计划管理</el-menu-item
            >
            <el-menu-item index="1-4" class="sub-item" @click="handleClick(18)"
              >生产统计展示</el-menu-item
            >
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <span>库存管理</span>
            </template>
            <el-menu-item index="2-1" class="sub-item" @click="handleClick(2)"
              >库存管理</el-menu-item
            >
            <el-menu-item index="2-2" class="sub-item" @click="handleClick(3)"
              >误差调整</el-menu-item
            >
            <el-menu-item index="2-3" class="sub-item" @click="handleClick(4)"
              >规格管理</el-menu-item
            >
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <span>销售管理</span>
            </template>
            <el-menu-item index="3-1" class="sub-item" @click="handleClick(31)"
              >销售订单管理</el-menu-item
            >
            <el-menu-item index="3-2" class="sub-item" @click="handleClick(32)"
              >送货单管理</el-menu-item
            >
            <el-menu-item index="3-3" class="sub-item" @click="handleClick(33)"
              >销售统计管理</el-menu-item
            >
          </el-sub-menu>

          <el-sub-menu index="4">
            <i class="el-icon-menu"></i>
            <template #title>采购管理</template>
            <el-menu-item index="4-1" class="sub-item" @click="handleClick(41)"
              >批次采购管理</el-menu-item
            >
            <el-menu-item index="4-2" class="sub-item" @click="handleClick(42)"
              >供应商管理</el-menu-item
            >
            <el-menu-item index="4-3" class="sub-item" @click="handleClick(43)"
              >采购成本管理</el-menu-item
            >
            <el-menu-item index="4-4" class="sub-item" @click="handleClick(44)"
              >采购模块统计</el-menu-item
            >
          </el-sub-menu>

          <el-sub-menu index="5">
            <i class="el-icon-menu"></i>
            <template #title>用户管理</template>
            <el-menu-item index="5-1" class="sub-item" @click="handleClick(99)"
              >用户管理</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  data() {
    return {
      username: "test",
      defaultActiveIndex: null, // 初始化选中 index 为 "1-1"
    };
  },
  mounted() {
    this.username = localStorage.getItem("username");
    this.updateActiveMenu(); // 初始化菜单激活状态
    // 监听路由变化，更新菜单激活状态
    this.$router.afterEach(() => {
      this.updateActiveMenu();
    });
  },
  methods: {
    updateActiveMenu() {
      const routeName = this.$route.name;
      const menuMap = {
        produceHJ: "1-1",
        produceRL: "1-2",
        produceRK: "1-3",
        produceTJ: "1-4",
        inventoryPage: "2-1",
        ErrorAdjustPage: "2-2",
        Spec: "2-3",
        order: "3-1",
        delivery: "3-2",
        statistic: "3-3",
        purchasePage: "4-1",
        supplier: "4-2",
        costPage: "4-3",
        purchaseStatistics: "4-4",
      };
      this.defaultActiveIndex = menuMap[routeName] || "";
      console.log("this.defaultActiveIndex", this.defaultActiveIndex);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      ElMessageBox.confirm("确认是否退出登录?", "退出登录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        localStorage.removeItem("username");
        localStorage.removeItem("token");
        localStorage.removeItem("superAdmin");
        this.$router.push("/Auth");
        ElMessage({
          type: "success",
          message: "退出登录",
        });
      });
    },
    handleClick(index) {
      const superAdmin = JSON.parse(
        localStorage.getItem("superAdmin") || "false"
      );
      const purchaseAdmin = JSON.parse(
        localStorage.getItem("purchaseAdmin") || "false"
      );
      const saleAdmin = JSON.parse(
        localStorage.getItem("saleAdmin") || "false"
      );
      const warehouseAdmin = JSON.parse(
        localStorage.getItem("warehouseAdmin") || "false"
      );
      const productionAdmin = JSON.parse(
        localStorage.getItem("productionAdmin") || "false"
      );

      let hasPermission = [];

      // 判断权限
      switch (index) {
        case 15:
        case 16:
        case 17:
        case 18:
          hasPermission[0] = productionAdmin || superAdmin;
          break;
        case 2:
        case 3:
        case 4:
          hasPermission[1] = warehouseAdmin || superAdmin;
          break;
        case 31:
        case 32:
        case 33:
          hasPermission[2] = saleAdmin || superAdmin;
          break;
        case 41:
        case 42:
        case 43:
        case 44:
          hasPermission[3] = purchaseAdmin || superAdmin;
          break;
        case 99:
          hasPermission[4] = superAdmin;
          break;
        default:
          break;
      }

      switch (index) {
        case 15:
          if (this.$route.name != "produceHJ" && hasPermission[0])
            this.$router.push(`/home/produce/produceHJ/${this.username}`);
          else if (!hasPermission[0])
            ElMessage.error("你没有生产管理权限,禁止访问");
          break;
        case 16:
          if (this.$route.name != "produceRL" && hasPermission[0])
            this.$router.push(`/home/produce/produceRL/${this.username}`);
          else if (!hasPermission[0])
            ElMessage.error("你没有生产管理权限,禁止访问");
          break;
        case 17:
          if (this.$route.name != "produceRK" && hasPermission[0])
            this.$router.push(`/home/produce/produceRK/${this.username}`);
          else if (!hasPermission[0])
            ElMessage.error("你没有生产管理权限,禁止访问");
          break;
        case 18:
          if (this.$route.name != "produceTJ" && hasPermission[0])
            this.$router.push(`/home/produce/produceTJ`);
          else if (!hasPermission[0])
            ElMessage.error("你没有生产管理权限,禁止访问");
          break;
        case 2:
          if (this.$route.name != "inventoryPage" && hasPermission[1])
            this.$router.push({
              name: "inventoryPage",
              params: {
                username: this.username, // 传递参数
              },
            });
          else if (!hasPermission[1])
            ElMessage.error("你没有库存管理权限,禁止访问");
          break;
        case 3:
          if (this.$route.name != "ErrorAdjustPage" && hasPermission[1])
            this.$router.push(`/home/inventory/ErrorAdjustPage`);
          else if (!hasPermission[1])
            ElMessage.error("你没有库存管理权限,禁止访问");
          break;
        case 4:
          if (this.$route.name != "Spec" && hasPermission[1])
            this.$router.push(`/home/inventory/Spec`);
          else if (!hasPermission[1])
            ElMessage.error("你没有库存管理权限,禁止访问");
          break;
        case 31:
          if (this.$route.name != "order" && hasPermission[2])
            this.$router.push(`/home/sale/order`);
          else if (!hasPermission[2])
            ElMessage.error("你没有销售管理权限,禁止访问");
          break;
        case 41:
          if (this.$route.name != "purchasePage" && hasPermission[3])
            this.$router.push(`/home/purchase/purchasePage`);
          else if (!hasPermission[3])
            ElMessage.error("你没有采购管理权限,禁止访问");
          break;
        case 42:
          if (this.$route.name != "supplier" && hasPermission[3])
            this.$router.push(`/home/purchase/supplier`);
          else if (!hasPermission[3])
            ElMessage.error("你没有采购管理权限,禁止访问");
          break;
        case 43:
          if (this.$route.name != "costPage" && hasPermission[3])
            this.$router.push(`/home/purchase/costPage`);
          else if (!hasPermission[3])
            ElMessage.error("你没有采购管理权限,禁止访问");
          break;
        case 44:
          if (this.$route.name != "purchaseStatistics" && hasPermission[3])
            this.$router.push(`/home/purchase/purchaseStatistics`);
          else if (!hasPermission[3])
            ElMessage.error("你没有采购管理权限,禁止访问");
          break;
        case 32:
          if (this.$route.name != "delivery" && hasPermission[2])
            this.$router.push(`/home/sale/delivery`);
          else if (!hasPermission[2])
            ElMessage.error("你没有销售管理权限,禁止访问");
          break;
        case 33:
          if (this.$route.name != "statistic" && hasPermission[2])
            this.$router.push(`/home/sale/statistic`);
          else if (!hasPermission[2])
            ElMessage.error("你没有销售管理权限,禁止访问");
          break;
        case 99:
          if (this.$route.name != "user" && hasPermission[4])
            this.$router.push(`/home/auth/user`);
          else if (!hasPermission[4])
            ElMessage.error("你没有超级管理员权限,禁止访问");
          break;
      }
    },
  },
};
</script>

<style scoped>
.head {
  position: relative;
  height: 70px;
  background-color: grey;
}
.body {
  height: calc(100% - 70px);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  user-select: none;
}
.title-name {
}
.nav {
  height: 100%;
  flex: 1.2;
  min-width: 200px;
}
.el-menu {
  overflow: hidden;
  height: 100%;
}
.el-menu-item {
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  margin: 10px 0;
}
.content {
  flex: 8.8;
  width: 0;
}
/* :deep(.el-sub-menu__title) {
  font-size: 18px;
} */
.sub-item {
  height: 50px;
  font-size: 14px;
}
.company {
  position: absolute;
  top: 35px;
  left: 5%;
  height: 40px;
  margin-top: -20px;
  line-height: 40px;
  font-size: 23px;
  font-weight: 600;
  color: white;
}
</style>
